<template>
    <div class="m-auto" id="main" style="width: 600px;height: 600px;" ></div>
</template>

<script setup>
import axios from 'axios';
import * as echarts from 'echarts'
import { onMounted,ref } from 'vue';

let item={
    value:"",
    name:""
  }
  let itemList=ref([])
  const getAllProjects=async()=>{
    let result=await axios({
      method:"get",
      url:"http://localhost:8080/getAllProjects"
    })
    let projextList=result.data
    for(let i=0;i<projextList.length;i++){
      item.value=projextList[i].exist_number
      item.name=projextList[i].project_name
      itemList.value.push(JSON.parse(JSON.stringify(item)))
    }
    return itemList.value
  }

  console.log(itemList.value)
  onMounted(async()=>{
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
  title: {
    text: '科创项目占比',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: await  getAllProjects(),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
})


</script>
<style scoped>

</style>